<template>
  <div class="visitor-index">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="tree-wrapper" :span="4">
        <left-tree @onSelect="onTreeSelected"></left-tree>
      </a-col>
      <a-col class="listContent-wrapper" :span="20">
        <div class="title-wrapper-box">
          <top-title :updateTime="true" :content="content"></top-title>
          <div
            v-if="isPoliceAgencyId.isChildren == false"
            class="add-btn cursor"
            style="position: unset"
            @click="handelAdd"
          >
            + 新增
          </div>
        </div>
        <div class="l-w_content">
          <div class="l-w_c_content">
            <div class="pageInfo">
              <list ref="listRef" :idCode="selectedKey" :villageList="villageList"></list>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <Add ref="addRef" :idCode="selectedKey" @refresh="onRefresh" />
  </div>
</template>

<script>
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import list from './modules/list'
import Add from './modules/add'
import { getCommunityList } from '@/api/api'
import { mapState } from 'vuex'

export default {
  name: 'pringing',
  components: { leftTree, topTitle, list, Add },
  data() {
    return {
      content: [['设备列表']],
      activeKey: '1',
      key: '',
      selectedKey: '',
      villageList: [],
      addRef: null,
      selectedData: {},
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  provide() {
    return {
      provideData: () => {
        return {
          institution: this.selectedData,
        }
      },
    }
  },
  mounted() {
    this.activeKey = this.$route.query.activeKey ? this.$route.query.activeKey : '1'
  },
  methods: {
    handelClick(event) {
      this.activeKey = event
      this.searchTableData()
    },
    onTreeSelected(selectedKeys, selectedData) {
      this.selectedData = selectedData
      this.selectedKey = Array.isArray(selectedKeys) ? selectedKeys[0] : ''
      if (this.selectedKey) {
        this.searchTableData()
      }
    },
    searchTableData() {
      this.$nextTick(() => {
        // 调用各个组件的 search 方法
        this.$refs.listRef.searchQuery()
      })
    },

    handelAdd() {
      this.$refs.addRef.show()
    },
    onRefresh() {
      this.$refs.listRef.searchReset()
    },
  },
}
</script>
<style lang="less" scoped>
.visitor-index {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
  .title-wrapper-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
